<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="32">
      <el-col :xs="12" :sm="12" :lg="6">
        <div class='card-panel card-panel-one'>
          <div class="card-panel-icon-wrapper icon-people card-one">
            <div class="img_card">
              <img src="../../assets/shujukanban/park.png" style="width: 100%;height: 100%">
            </div>
            <div class="text_card">
              <p>停车场</p>
            </div>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text" align="left">
              <span style="margin-left: 12px;margin-top: 15px;font-size: 13px;color:#FFFFFF;">路内</span>
              <count-to style="font-size: 20px;color: #FFFFFF;" class="card-panel-num" :startVal="0"
                        :endVal="this.park.onRoad"></count-to>
              <!--{{park.onRoadRate}}-->
            </div>
            <div class="card-panel-text" align="left">
              <span style="margin-left: 12px;font-size: 13px;color:#FFFFFF;">路外</span>
              <count-to style="font-size: 20px;color: #FFFFFF;" class="card-panel-num" :startVal="0"
                        :endVal="this.park.offRoad"></count-to>
              <!--{{park.offRoadRate}}-->
            </div>
          </div>
          <div class="pp" style="height: 80px;float: right;width: 80px;">
            <img src="../../assets/images/气泡.png"style="height: 80px;width: 80px;"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class='card-panel card-panel-two'>
          <div class="card-panel-icon-wrapper icon-people card-two">
            <div class="img_card">
              <img src="../../assets/shujukanban/bwnum.png" style="width: 100%;height: 100%">
            </div>
            <div class="text_card">
              <p>泊位数</p>
            </div>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text" align="left">
              <span style="margin-left: 12px;margin-top: 15px;font-size: 13px;color:#FFFFFF;">路内</span>
              <count-to style="font-size: 20px;color: #FFFFFF;" class="card-panel-num" :startVal="0"
                        :endVal="this.road.onRoad"></count-to>
              <!--{{road.onRoadRate}}-->
            </div>
            <div class="card-panel-text" align="left">
              <!--<span-->
              <!--style="font-size: 1.5em;margin-right: 0.2em;color: #080470">{{park.total}}</span>-->
              <span style="margin-left: 12px;font-size: 13px;color:#FFFFFF;">路外</span>
              <count-to style="font-size: 20px;color: #FFFFFF;" class="card-panel-num" :startVal="0"
                        :endVal="this.road.offRoad"></count-to>
              <!--{{road.offRoadRate}}-->
            </div>
          </div>
          <div style="margin-left: 20px;padding-top: 23px;width: 100px;height: 80px;float: left">
            <div style="width: 100%;">
              <el-progress :percentage="parseFloat(road.onRoadRate)" :show-text="false" color="#4DFF2A" :stroke-width="5"></el-progress>
            </div>
            <div style="width: 100%;margin-top: 24px;">
              <el-progress :percentage="parseFloat(road.offRoadRate)" :show-text="false" color="#4DFF2A" :stroke-width="5"></el-progress>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class='card-panel card-panel-three'>
          <div class="card-panel-icon-wrapper icon-people card-three">
            <div class="img_card">
              <img src="../../assets/shujukanban/parking.png" style="width: 100%;height: 100%">
            </div>
            <div class="text_card">
              <p>在停车</p>
            </div>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text" align="left">
              <span style="margin-left: 12px;margin-top: 15px;font-size: 13px;color:#FFFFFF;">路内</span>
              <count-to style="font-size: 20px;color: #FFFFFF;" class="card-panel-num" :startVal="this.parking.onRoad"
                        :endVal="this.parking.onRoad"></count-to>
            </div>
            <div class="card-panel-text" align="left">
              <!--<span-->
              <!--style="font-size: 1.5em;margin-right: 0.2em;color: red">{{parking.total}}</span>-->
              <span style="margin-left: 12px;font-size: 13px;color:#FFFFFF;">路外</span>
              <count-to style="font-size: 20px;color: #FFFFFF;" class="card-panel-num" :startVal="this.parking.offRoad"
                        :endVal="this.parking.offRoad"></count-to>
            </div>
          </div>
          <div class="pp" style="height: 80px;float: right;width: 80px;">
            <img src="../../assets/images/气泡.png"style="height: 80px;width: 80px;"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class='card-panel card-panel-four'>
          <div class="card-panel-icon-wrapper icon-people card-four">
            <div class="img_card">
              <img src="../../assets/shujukanban/djpark.png" style="width: 100%;height: 100%">
            </div>
            <div class="text_card">
              <p>对接车场</p>
            </div>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              <span style="margin-left: 12px;margin-top: 15px;font-size: 13px;color:#FFFFFF;">对接</span>
              <count-to style="font-size: 20px;color: #F8E71C;" class="card-panel-num"
                        :startVal="this.dockingSituations.alreadyDockingParkingNUm"
                        :endVal="this.dockingSituations.alreadyDockingParkingNUm"></count-to>
              <!--{{this.dockingSituations.alreadyDockingRate}}-->
            </div>
            <div class="card-panel-text" align="left">
              <!--<span-->
              <!--style="font-size: 1.5em;margin-right: 0.5em;color: #2cff17">2</span>-->
              <span style="margin-left: 12px;font-size: 13px;color:#FFFFFF;">未对接</span>
              <count-to style="font-size: 20px;color: #55D352;" class="card-panel-num"
                        :startVal="this.dockingSituations.notDockingParkingNUm"
                        :endVal="this.dockingSituations.notDockingParkingNUm"></count-to>
              <!--{{this.dockingSituations.notDockingRate}}-->
            </div>
          </div>
          <div style="margin-left: 20px;padding-top: 23px;width: 100px;height: 80px;float: left">
            <div style="width: 100%;">
              <el-progress :percentage="parseFloat(dockingSituations.alreadyDockingRate)" :show-text="false" color="#F8E71C" :stroke-width="5"></el-progress>
            </div>
            <div style="width: 100%;margin-top: 24px;">
              <el-progress :percentage="parseFloat(dockingSituations.notDockingRate)" :show-text="false" color="#F8E71C" :stroke-width="5"></el-progress>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="12" :lg="12">
        <div class='chart-wrapper chart-one'>
          <el-row :gutter="24" style="height: 80px;">
            <el-col :xs="2" :sm="2" :lg="2">
              <img src="../../assets/images/道路.png" style="width: 48px;height:42px;margin-left: 6px;margin-top: 18px;">
            </el-col>
            <el-col :xs="22" :sm="22" :lg="22">
              <el-row>
                <el-col :xs="6" :sm="6" :lg="6" class="title_text">禁停道路数</el-col>
                <el-col :xs="6" :sm="6" :lg="6" class="title_text">限停道路数</el-col>
                <el-col :xs="6" :sm="6" :lg="6" class="title_text">准停道路数</el-col>
                <el-col :xs="6" :sm="6" :lg="6" class="title_text">临停道路储备数</el-col>
              </el-row>
              <el-row>
                <el-col :xs="6" :sm="6" :lg="6" class="msg_text">
                  <count-to :startVal="0" style="font-size: 20px;color: #53c4ec;"
                            :endVal="0"></count-to>
                </el-col>
                <el-col :xs="6" :sm="6" :lg="6" class="msg_text">
                  <count-to :startVal="0" style="font-size: 20px;color: #53c4ec;"
                            :endVal="0"></count-to>
                </el-col>
                <el-col :xs="6" :sm="6" :lg="6" class="msg_text">
                  <count-to :startVal="0" style="font-size: 20px;color: #53c4ec;"
                            :endVal="0"></count-to>
                </el-col>
                <el-col :xs="6" :sm="6" :lg="6" class="msg_text">
                  <count-to style="font-size: 20px;color: #53c4ec;" :startVal="0"
                            :endVal="0"></count-to>
                </el-col>
              </el-row>
             <!-- <div class="card-panel-text " align="right" style="margin-top: 15px;margin-right: 10%">
                <span style=" margin-left: 0.2em;font-size: 1.0em ;color: red">禁停道路数</span>
                <count-to style="font-size: 1.5em;color: red" class="card-panel-num" :startVal="0"
                          :endVal="0"></count-to>
              </div>
              <div class="card-panel-text" align="right" style="margin-top: 15px;margin-right: 10%">
                <span style=" margin-left: 0.2em;font-size: 1.0em;color: #ffba5d">限停道路数</span>
                <count-to style="font-size: 1.5em;color: #ffba5d" class="card-panel-num" :startVal="0"
                          :endVal="0"></count-to>
              </div>
              <div class="card-panel-text" align="right" style="margin-top: 15px;margin-right: 10%">
                <span style="margin-left: 0.2em;font-size: 1.0em;color: green">准停道路数</span>
                <count-to style="font-size: 1.5em;color: green" class="card-panel-num" :startVal="0"
                          :endVal="0"></count-to>
              </div>
              <div class="card-panel-text" align="right" style="margin-top: 15px;margin-right: 10%">
                <span style="margin-left: 0.2em;font-size: 1.0em;color: #78804c">临停道路储备数</span>
                <count-to style="font-size: 1.5em;color: #78804c" class="card-panel-num" :startVal="0"
                          :endVal="0"></count-to>
              </div>-->
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12">
        <div class='chart-wrapper chart-two'>
          <el-row :gutter="24" style="height: 80px;">
            <el-col :xs="2" :sm="2" :lg="2">
              <img src="../../assets/images/违.png" style="width: 48px;height:42px;margin-left: 6px;margin-top: 18px;">
            </el-col>
            <el-col :xs="22" :sm="22" :lg="22">
              <el-row>
                <el-col :xs="6" :sm="6" :lg="6" class="title_text">今日违停数</el-col>
                <el-col :xs="6" :sm="6" :lg="6" class="title_text">今日疑似僵尸车数</el-col>
                <el-col :xs="6" :sm="6" :lg="6" class="title_text">累计处理僵尸车数</el-col>
                <el-col :xs="6" :sm="6" :lg="6" class="title_text">累计识别疑似套牌车数</el-col>
              </el-row>
              <el-row>
                <el-col :xs="6" :sm="6" :lg="6" class="msg_text">
                  <count-to :startVal="0" style="font-size: 20px;color: #3a8ee6;"
                            :endVal="0"></count-to>
                </el-col>
                <el-col :xs="6" :sm="6" :lg="6" class="msg_text">
                  <count-to :startVal="0" style="font-size: 20px;color: #3a8ee6;"
                            :endVal="0"></count-to>
                </el-col>
                <el-col :xs="6" :sm="6" :lg="6" class="msg_text">
                  <count-to :startVal="0" style="font-size: 20px;color: #3a8ee6;"
                            :endVal="0"></count-to>
                </el-col>
                <el-col :xs="6" :sm="6" :lg="6" class="msg_text">
                  <count-to style="font-size: 20px;color: #3a8ee6;" :startVal="0"
                            :endVal="0"></count-to>
                </el-col>
              </el-row>
             <!-- <div class="card-panel-text " align="right" style="margin-top: 15px;margin-right: 10%">
                <span style=" margin-left: 0.2em;font-size: 1.0em;color: red">今日违停数</span>
                <count-to style="font-size: 1.5em;color: red" class="card-panel-num" :startVal="0"
                          :endVal="0"></count-to>
              </div>
              <div class="card-panel-text" align="right" style="margin-top: 15px;margin-right: 10%">
                <span style=" margin-left: 0.2em;font-size: 1.0em;color: #ffba5d">今日疑似僵尸车数</span>
                <count-to style="font-size: 1.5em;color: #ffba5d" class="card-panel-num" :startVal="0"
                          :endVal="0"></count-to>
              </div>
              <div class="card-panel-text" align="right" style="margin-top: 15px;margin-right: 10%">
                <span style="margin-left: 0.2em;font-size: 1.0em;color: green">累计处理僵尸车数</span>
                <count-to style="font-size: 1.5em;color: green" class="card-panel-num" :startVal="0"
                          :endVal="0"></count-to>
              </div>
              <div class="card-panel-text" align="right" style="margin-top: 15px;margin-right: 10%">
                <span style="margin-left: 0.2em;font-size: 1.0em;color: #78804c">累计识别疑似套牌车数</span>
                <count-to style="font-size: 1.5em;color: #78804c" class="card-panel-num" :startVal="0"
                          :endVal="0"></count-to>
              </div>-->
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :lg="24">
        <div class='chart-wrapper chart-three'>
          <el-row :gutter="24" style="height: 48px;">
            <el-col :xs="6" :sm="6" :lg="6" style="font-family: MicrosoftYaHei;font-size: 14px;color: #FFFFFF;margin-top: 14px;padding-left: 24px;">截止当前共上传</el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <div style="width: 100%;">
                <img src="../../assets/images/入场.png" style="width: 24px;height: 24px;margin-top: 12px;float: left">
                  <span style="font-size: 13px;color: #FFFFFF;float: left;margin-top: 15px;margin-left: 12px;">入场数</span>
                <count-to style="float:left;margin-left: 12px;font-size: 22px;color: #11B164;margin-top: 10px;" :startVal="0"
                          :endVal="collectorRealInfo.entranceNum"></count-to>
              </div>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <div style="width: 100%;">
                <img src="../../assets/images/出场.png" style="width: 24px;height: 24px;margin-top: 12px;float: left">
                <span style="font-size: 13px;color: #FFFFFF;float: left;margin-top: 15px;margin-left: 12px;">出场数</span>
                <count-to style="float:left;margin-left: 12px;font-size: 22px;color: #66fbff;margin-top: 10px;" :startVal="0"
                          :endVal="collectorRealInfo.exitNum"></count-to>
              </div>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <div style="width: 100%;">
                <img src="../../assets/images/泊位数.png" style="width: 20px;height: 20px;margin-top: 11px;float: left">
                <span style="font-size: 13px;color: #FFFFFF;float: left;margin-top: 15px;margin-left: 12px;">校正泊位数</span>
                <count-to style="float:left;margin-left: 12px;font-size: 22px;color: #66b1ff;margin-top: 10px;" :startVal="0"
                          :endVal="collectorRealInfo.remainPlace"></count-to>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="9" :lg="9">
        <div class="chart-wrapper record-one">
          <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #30ACEF;margin-top: 9px;margin-bottom: 15px">停车场接入流水</p>
          <tcliushui :dataList="accountInfoList" @imgUrl="seeRecordImg"></tcliushui>
        </div>
      </el-col>
      <el-col :xs="24" :sm="9" :lg="9">
        <div class="chart-wrapper record-one">
          <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #30ACEF;margin-top: 9px;margin-bottom: 15px">预警信息列表</p>
          <Yujing :dataList="lastUploadList"></Yujing>
        </div>
      </el-col>
      <el-col :xs="24" :sm="6" :lg="6">
        <div class="chart-wrapper record-one">
          <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #30ACEF;margin-top: 9px;margin-bottom: 15px">严重警告信息</p>
          <yanzhongjinggao :warnList="ParkUploadWarningList"></yanzhongjinggao>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <!---->
      <el-col :xs="24" :sm="12" :lg="12">
        <div class="chart-wrapper record-one">
          <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #30ACEF;margin-top: 9px;margin-bottom: 15px">停车压力</p>
          <pressure :dataList="pressureList"></pressure>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12">
        <div class="chart-wrapper record-one">
          <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #30ACEF;margin-top: 9px;margin-bottom: 15px">车辆入场数量</p>
          <putin :dataList="momentParkInCars"></putin>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="10" :lg="10">
        <div class="chart-wrapper record-one">
          <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #30ACEF;margin-top: 9px;margin-bottom: 15px">追踪车辆</p>
          <TraceCarTable :dataList=carTraceList></TraceCarTable>
        </div>
      </el-col>
      <el-col :xs="24" :sm="7" :lg="7">
        <div class="chart-wrapper record-one">
          <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #30ACEF;margin-top: 9px;margin-bottom: 15px">违停信息</p>
          <WeitingTable></WeitingTable>
        </div>
      </el-col>
      <el-col :xs="24" :sm="7" :lg="7">
        <div class="chart-wrapper record-one">
          <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #30ACEF;margin-top: 9px;margin-bottom: 15px">疑似僵尸车列表</p>
          <jiangshiche :dataList="zombieCarsList"></jiangshiche>
        </div>
      </el-col>
    </el-row>
    <!--停车流水弹出框-->
    <record-img :imgVisible.sync="imgVisible" :imgUrl="imgUrl"></record-img>
  </div>
</template>
<script>
  import CountTo from 'vue-count-to'
  import Pressure from './show/pressure'
  import Yujing from './show/yujing'
  import Weiting from './show/weiting'
  import WeitingTable from './show/weiting-table'
  import Tcliushui from './show/tcliushui'
  import Jiangshiche from './show/jiangshiche'
  import Yanzhongjinggao from './show/yanzhongjinggao'
  import TraceCarTable from './show/trace-car-table'
  import Putin from './show/putin'
  import moment from 'moment'
  import {
    queryPlacesInfo,
    queryParksInfo,
    queryParkingCars,
    queryParkUploadWarningInfo,
    queryParkLastUploadInfo,
    queryAccountInfo,
    queryZombieCars,
    queryMomentParkInCars,
    queryDockingSituation,
    queryLastCarTraceMessages,
    queryMomentParkUseRatio,
    queryCollectorRealInfo
  } from '../../api/dashboard'
  import RecordImg from "./show/showDialog/recordImg";

  export default {
    components: {
      RecordImg,
      Putin,
      Yanzhongjinggao,
      Jiangshiche,
      Tcliushui,
      Weiting,
      WeitingTable,
      Pressure,
      Yujing,
      CountTo,
      TraceCarTable
    },
    data() {
      return {
        imgVisible: false,
        imgUrl: '',
        interval: null,
        road: {},
        park: {},
        parking: {},
        ParkUploadWarningList: [],
        lastUploadList: [],
        accountInfoList: [],
        zombieCarsList: [],
        momentParkInCars: [],
        dockingSituations: [],
        carTraceList: [],
        pressureList: [],
        collectorRealInfo: {
          entranceNum: 0,
          exitNum: 0,
          remainPlace: 0
        }
      }
    },
    created() {
      this.initPage()
      this.interval = setInterval(this.timerData, 5000)
    },
    beforeDestroy() {
      clearInterval(this.interval)
    },
    methods: {
      initPage() {
        this.initData()
        this.queryParkUploadWarningInfo()
        this.queryParkLastUploadInfo()
        this.queryAccountInfo()
        this.queryZombieCars()
        this.queryMomentParkInCars()

        this.queryCollectorRealInfo()
        this.queryLastCarTraceMessages()
        this.queryMomentParkUseRatio()
      },
      initData() {
        queryPlacesInfo().then(res => {
          this.road = res
        })
        queryParksInfo().then(res => {
          this.park = res
        })
        queryParkingCars().then(res => {
          this.parking = res
        })
        queryDockingSituation().then(res => {
          console.log(res);
          this.dockingSituations = res
        })
      },
      queryParkUploadWarningInfo() {
        this.ParkUploadWarningList = []
        queryParkUploadWarningInfo().then(res => {
          this.ParkUploadWarningList = res
        })
      },
      queryParkLastUploadInfo() {
        queryParkLastUploadInfo().then(res => {
          this.lastUploadList = res
        })
      },
      queryAccountInfo() {
        queryAccountInfo().then(res => {
          const array = []
          Object.assign(array, res)
          if (array.length > 0) {
            for (const index in array) {
              array[index].inOrOutStr = array[index].inOrOut === '1' ? '入场' : '出厂'
              array[index].time = array[index].time.substr(10)
            }
          }
          this.accountInfoList = array
        })
      },
      queryZombieCars() {
        queryZombieCars().then(res => {
          this.zombieCarsList = res
        })
      },
      queryMomentParkInCars() {
        queryMomentParkInCars(moment().format('YYYY-MM-DD')).then(res => {
          this.momentParkInCars = res
        })
      },
      queryLastCarTraceMessages() {
        queryLastCarTraceMessages(10).then(res => {
          this.carTraceList = res
        })
      },
      queryMomentParkUseRatio() {
        queryMomentParkUseRatio(moment().subtract(1, 'days').format('YYYY-MM-DD')).then(res => {
          this.pressureList = res
        })
      },
      queryCollectorRealInfo() {
        queryCollectorRealInfo().then(res => {
          this.collectorRealInfo = res
        })
      },

      timerData() {
        this.initData()
        this.queryParkUploadWarningInfo()
        this.queryParkLastUploadInfo()
        this.queryAccountInfo()
        // this.queryZombieCars()// 僵尸车
        this.queryMomentParkInCars()

        this.queryLastCarTraceMessages()
        this.queryMomentParkUseRatio()

      },
      seeRecordImg(val) {
        this.imgVisible = true
        this.imgUrl = val
      }
    }
  }
</script>

<style lang="less" scoped>
  .record-one{
    padding-top: 9px !important;
    padding-bottom: 14px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    background: #1B4685;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);
    border-radius: 2px;
  }
  .title_text{
    font-family: MicrosoftYaHei;
    font-size: 13px;
    color: #FFFFFF;
    text-align: center;
    line-height: 32px;
  }
  .msg_text{
    font-family: MicrosoftYaHei;
    font-size: 20px;
    color: #200000;
    text-align: center;
    line-height: 32px;
  }
  .chart-one{
    padding: 0px !important;
    background-color: #1B4685 !important;
    border-radius: 2px;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);
  }
  .chart-two{
    padding: 0px !important;
    background-color: #1B4685 !important;
    border-radius: 2px;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);
  }
  .chart-three{
    padding: 0px !important;
    background-color: #1B4685 !important;
    border-radius: 2px;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);
  }
  .dashboard-editor-container {
    padding-top: 10px;
    padding-left: 17px;
    padding-right: 17px;
    padding-bottom: 42px;
    background-color: #1A4380;
    .chart-wrapper {
      //background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 12px;
    }
  }
  .card-panel{
    border-radius: 4px;
  }

.img_card{
  width: 24px;
  height: 24px;
  margin: 0 auto;
}
.card-panel-text{
  width: 100%;
}
.text_card{
  margin: 0 auto;
}
.card-panel-one{
  background: linear-gradient(#27B1D9, #1179B1);
}
  .card-panel-two{
    background: linear-gradient(#27D99D, #11B164);
  }
  .card-panel-three{
    background: linear-gradient(#27D9D4, #11B1A9);
  }
  .card-panel-four{
    background: linear-gradient(#D9B427, #B17D11);
  }
.text_card{
  font-family: MicrosoftYaHei;
  font-size: 13px;
  color: #FFFFFF;
  text-align: center;
}
  .text_card p{
   margin-top: 6px;
  }
  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    margin-bottom: 13px;
    height: 80px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    //background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
      .icon-people {
        background: #40E0D0;
      }
      .icon-message {
        background: #36a3f7;
      }
      .icon-money {
        background: #EEB422;
      }
      .icon-shoppingCard {
        background: #548B54
      }
    }
    .icon-people {
      color: #40c9c6;
    }
    .icon-message {
      color: #36a3f7;
    }
    .icon-money {
      color: #F5A327;
    }
    .icon-shoppingCard {
      color: #ACD261
    }
    .card-one{
      background-color: #1179B1;
    }
    .card-two{
      background-color: #11B164;
    }
    .card-three{
      background-color: #11B1A9;
    }
    .card-four{
      background-color: #B17D11;
    }
    .card-panel-icon-wrapper {
      width: 80px;
      height: 80px;
      float: left;
      //margin: 31px 0 0 6px;
      padding-top: 20px;
      transition: all 0.38s ease-out;
      //border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: left;
      height: 80px;
      padding-top: 15px;
      //font-weight: bold;
     /* margin-top: 26px;
      margin-right: 10px;*/
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-num {
        font-size: 18px;
      }
    }
  }
  .card-panel-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

</style>
